<template>
  <el-col :span="3">
    <el-menu default-active="2" class="el-menu-vertical-demo" @select="handleClick" unique-opened>
      <!-- <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <PieChart />
          </el-icon>
          <span>首页</span>
        </template>
        <el-menu-item index="1-1">数据可视化</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <Histogram />
          </el-icon>
          <span>楼盘管理</span>
        </template>
        <el-menu-item index="2-1">新房列表</el-menu-item>
        <el-menu-item index="2-2">发布新房</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <UploadFilled />
          </el-icon>
          <span>内容审核</span>
        </template>
        <el-menu-item index="3-1">楼盘点评</el-menu-item>
        <el-menu-item index="3-2">楼盘解读</el-menu-item>
        <el-menu-item index="3-3">买房咨询</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon>
            <Promotion />
          </el-icon>
          <span>咨询管理</span>
        </template>
        <el-menu-item index="4-1">咨询管理</el-menu-item>
        <el-menu-item index="4-2">发布、编辑咨询</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon>
            <UserFilled />
          </el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item-group title="个人用户">
          <el-menu-item index="5-1">编辑个人用户</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="权限管理">
          <el-menu-item index="5-2">权限管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->
      <!-- <template v-for="item of menuList" :key="item.path">
        <el-sub-menu :index="item.path">
          <template #title>
            <span>
              {{ item.name }}
            </span>
          </template>
        </el-sub-menu>
        <el-menu-item :index="item.path" v-for="sub of item.children" :key="sub.path">
          {{ sub.name }}
        </el-menu-item>
      </template> -->
      <template v-for="item of $store.state.menu" :key="item.path">
        <el-menu-item v-if="!item.children" :index="item.path">{{ item.name }}</el-menu-item>
        <el-sub-menu v-else :index="item.path">
          <template #title>
            {{ item.name }}
          </template>
          <el-menu-item v-for="sub of item.children" :key="sub.path" :index="sub.path">{{ sub.name }}</el-menu-item>
        </el-sub-menu>
      </template>


    </el-menu>
  </el-col>

</template>
<script>
import { defineComponent } from 'vue';
import Menu from '@/menu';
export default defineComponent({
  nam: 'Menu',
  data() {
    return {
      menuList: Menu,
    };
  },
  methods: {
    handleClick(res) {
      console.log('点击了', res);
      // const { index } = res;
      this.$router.push(res);
      // console.log(index);
    },
  },
});


</script>
